<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">

<!--修改标记模态框-->
<div class="modal fade" id="modal-update">
    <div class="modal-dialog" style="width:600px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">库存划项目标记</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header">
                            </div>
                            <div class="box-body">
                                <form id="modalForm" class="form-horizontal" role="form">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <input type="hidden" name="ipmBeforeItyId" id="ipmBeforeItyId">
                                                <input type="hidden" name="ipmId" id="ipmId">
                                                <label class="control-label col-sm-3"
                                                       for="ityMatDescModal">物料描述<br>（铝料类型）</label>
                                                <div class="col-sm-9">
                                                    <input name="ityMatDesc" id="ityMatDescModal" class="form-control"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3"
                                                       for="ipmInProjectCodeModal">新项目编码</label>
                                                <div class="col-sm-9">
                                                    <input name="ipmInProjectCode"
                                                           id="ipmInProjectCodeModal"
                                                           class="form-control" type="text"
                                                           list="ceoNeedProCodeList"
                                                           autocomplete="off"
                                                           onchange="changeIpmInProjectName()"
                                                           oninput="findProCodeListData(this)"/>
                                                    <datalist id="ceoNeedProCodeList">
                                                    </datalist>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3"
                                                       for="ipmInProjectNameModal">新项目名称</label>
                                                <div class="col-sm-9">
                                                    <input name="ipmInProjectName" id="ipmInProjectNameModal"
                                                           class="form-control" type="text" readonly/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3">可用数量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ityAvaNum" id="ityAvaNumModal" class="form-control"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                                <label class="control-label col-sm-3">可用重量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ityAvaWeight" id="ityAvaWeightModal" class="form-control"
                                                           type="text"
                                                           readonly="readonly"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3">标记数量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ipmNum" id="ipmNumModal"
                                                           oninput="checkValue(this)"
                                                           class="col-sm-5 form-control" type="text"/>
                                                </div>
                                                <label class="control-label col-sm-3">标记重量</label>
                                                <div class="col-sm-3" style="padding-right: 0px">
                                                    <input name="ipmWeight" id="ipmWeightModal"
                                                           class="col-sm-5 form-control" type="text" readonly/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group" style="height: 60px">
                                                <label class="control-label col-sm-3" for="ipmRemarkModal">划拨说明</label>
                                                <div class="col-sm-9">
                                                    <input name="ipmRemark" id="ipmRemarkModal" class="form-control"
                                                           type="text" maxlength="255"/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" type="button" id="btn-save">保存</button>
                <button class="btn btn-warning" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<!--选择外购件库存模态框-->
<div class="modal fade" id="modal-select-purchase">
    <div class="modal-dialog" style="width: 1350px;">
        <div class="modal-content">
            <div class="modal-header" style="padding-bottom: 0px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">外购件库在库明细信息</h4>
            </div>
            <div class="modal-body" style="padding-bottom: 5px;padding-top: 0px;">
                <div class="row">
                    <div class="col-xs-12">
                        <div class="box">
                            <div class="box-header" style="padding-bottom: 0px;">
                                <form id="modalQueryForm">
                                    <div class="row" id="HiddenDiv">
                                        <div class="form-inline">
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    生产状态
                                                </label>
                                                <select id="proProductionStatus" name="proProductionStatus"
                                                        class="form-control select">
                                                    <option value="" selected="selected">全部</option>
                                                    <option value="-1">无状态</option>
                                                    <option value="1">未开始</option>
                                                    <option value="2">执行中</option>
                                                    <option value="3">已完成</option>
                                                    <option value="4">取消</option>
                                                    <option value="5">暂缓</option>
                                                </select>
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>跟踪号</label>
                                                <input type="text" id="ityTrackCode" name="ityTrackCode"
                                                       class="form-control"
                                                       placeholder="请输入跟踪号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>项目名称</label>
                                                <input type="text" id="ityProName" name="ityProName"
                                                       class="form-control"
                                                       placeholder="请输入项目名称">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>项目编号</label>
                                                <input type="text" id="ityProCode" name="ityProCode"
                                                       class="form-control"
                                                       placeholder="请输入项目编号">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    物料描述
                                                </label>
                                                <input type="text" id="ityMatDesc" name="ityMatDesc"
                                                       class="form-control"
                                                       placeholder="请输入物料描述">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    物料编码
                                                </label>
                                                <input type="text" id="ityMatCode" name="ityMatCode"
                                                       class="form-control"
                                                       placeholder="请输入物料编码">
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>仓库</label>
                                                <select id="ityWhiId" class="form-control select" name="ityWhiId">
                                                </select>
                                                <!--<input type="text" id="stockMaterialTypeQuery" name="stockMaterialTypeQuery"
                                                       class="form-control"
                                                       placeholder="请输入原料类型">-->
                                            </div>
                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <label>
                                                    库位
                                                </label>
                                                <input type="text" id="ityPosition" name="ityPosition"
                                                       class="form-control"
                                                       placeholder="请输入库位">
                                            </div>

                                            <div class="form-group" style="margin-right: 10px;margin-bottom: 10px;">
                                                <button type="button" class="btn btn-vk" id="btn_inventorySearch">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;搜索&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="box-body"
                                 style="padding-top: 0px;padding-bottom: 0px;margin-top: -50px;height: 600px">
                                <table id="inventoryQueryTable" class="table table-bordered " width="100%"
                                       data-height="600">
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-top: 5px;">
                <button type="button" class="btn btn-info" id="btn-selectMaterial-commit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>

</div>
<section class="content-header">
    <h1>库存划项目申请</h1>
</section>
<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <div class="box-header">
                    <form id="queryForm" class="form-inline">
                        <div class="form-group">
                            <label>
                                项目编号
                            </label>
                            <input name="ipmInProjectCode" type="text" class="form-control text"
                                   placeholder="请输入项目编号"/>
                        </div>
                        <div class="form-group">
                            <label>
                                项目名称
                            </label>
                            <input name="ipmInProjectName" type="text" class="form-control text" maxlength="255"
                                   placeholder="请输入项目名称"/>
                        </div>
                        <div class="form-group">
                            <label>
                                物料描述
                            </label>
                            <input name="ipmMatDesc" type="text" class="form-control text" maxlength="255"
                                   placeholder="请输入物料描述"/>
                        </div>

                        <div class="form-group">
                            <label>
                                标记人
                            </label>
                            <input name="ipmProposer" type="text" class="form-control text" maxlength="255"
                                   placeholder="请输入标记人"/>
                        </div>
                        <div class="form-group">
                            <label>
                                规格
                            </label>
                            <input name="itySpec" type="text" class="form-control text" maxlength="255"
                                   placeholder="请输入规格"/>
                        </div>
                        <div class="form-group">
                            <label>标记日期</label>
                            <input type="text" class="form-control datepicker" id="startOdrMakeDate"
                                   name="startOdrMakeDate" readonly="readonly"/>
                            <span>至</span>
                            <input type="text" class="form-control datepicker" id="endOdrMakeDate"
                                   name="endOdrMakeDate" readonly="readonly"/>
                        </div>
                        <div class="form-group">
                            <label>
                                物料分类
                            </label>
                            <select name="ityMatType" id="ityMatType" class="form-control select">
                                <option value="" selected>全部</option>
                                <option value="2" >外协件</option>
                                <option value="4">铝料</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>
                                划拨状态
                            </label>
                            <select name="ipmAppStatus" class="form-control select">
                                <option value="">全部</option>
                                <option value="1" selected>未提交</option>
                                <option value="4">被驳回</option>
                                <option value="2">已提交</option>
                                <option value="3">已执行</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <button type="button" class="btn btn-success" id="btn-search">搜索
                            </button>
                        </div>
                    </form>
                </div>
                <div id="toolbar">
                    <button type="button" shiro:hasPermission="halinv:halwarpro:edit"
                            class="btn btn-success" onclick="submitApply('')">
                        批量提交
                    </button>
                    <a href="/half/halInvManage/invToProMark/createPage" shiro:hasPermission="halinv:halwarpro:edit" class="btn btn-info" id="btn-add-flag" style="background-color: #00c0ef; border: #00c0ef;">新增标记</a>
<!--                    <a href="/half/halInvManage/invToProMark/createPage" shiro:hasPermission="halinv:halwarpro:edit" class="btn btn-info" th:href="@{/half/halInvManage/invToProMark/import}" style="background-color: #00c0ef; border: #00c0ef;">批量标记导入</a>-->
                </div>

                <div class="box-body">
                    <table id="bootstrap-table" class="table table-bordered " width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>

<div th:include="include :: footer"></div>
<script th:inline="javascript">
    var table;
    var appyStatusText = ["", "未提交", "已提交", "已执行", "被驳回"];
    var colors = ['', "bg-gray", "bg-gray", "bg-green", "bg-red"];

    /**
     *@FunctionName: submitApply
     *@Description: 提交
     *@Author: TH
     *@Version: 1.0.0
     */
    function submitApply(ipmId) {
        if (ipmId == '') {
            $('input[name="cb_change"]').each(function () {
                if (!$(this).prop("disabled")) {
                    if ($(this).prop("checked")) {
                        ipmId += $(this).attr("data") + ",";
                    }
                }
            })
            ipmId = ipmId.substring(0, ipmId.length - 1);
        }
        if (ipmId == '') {
            js.modal.warning("请选择要提交的库存划项目申请！");
            return;
        }
        js.modal.confirm("您确认要提交此标记吗？", function () {
            $.post(ctx + 'half/halInvManage/invToProMark/submitApply', {
                ipmIds: ipmId
            }, function (result) {
                if (result.type == "SUCCESS") {
                    js.table.refresh(table);
                }
            }, 'json');
        });
    }

    /**
     *@FunctionName: removeApply
     *@Description: 删除
     *@Author: TH
     *@Version: 1.0.0
     */
    function removeApply(ipmId) {
        js.modal.confirm("您确认要删除选中的标记吗？", function () {
            if (ipmId == '') {
                $('input[name="cb_change"]').each(function () {
                    if (!$(this).prop("disabled")) {
                        if ($(this).prop("checked")) {
                            ipmId += $(this).attr("data") + ",";
                        }
                    }
                })
                ipmId = ipmId.substring(0, ipmId.length - 1);
            }
            if (ipmId == '') {
                js.modal.warning("请选择要删除的库存划项目申请！");
                return;
            }
            $.post(ctx + 'half/halInvManage/invToProMark/removeApply', {
                ipmIds: ipmId
            }, function (result) {
                if (result.type == "SUCCESS") {
                    $("#selectAll").prop('checked', false);
                    js.table.refresh(table);
                }
            }, 'json');
        });
    }

    /**
     *@FunctionName: search
     *@Description: 查询
     *@Author: TH
     *@Version: 1.0.0
     */
    function search() {
        js.table.search(table);
    }

    /**
     *@FunctionName: selectAll
     *@Description: 全选
     *@Author: TH
     *@Version: 1.0.0
     */
    function selectAll(obj) {
        $('input[name="cb_change"]').each(function () {
            if (!$(this).prop("disabled")) {
                if ($(obj).prop("checked")) {
                    $(this).prop("checked", true);
                }
                if ($(obj).prop("checked") == false) {
                    $(this).prop("checked", false);
                }
            }
        })
    }

    /** 打开单条修改模态框 */
    function editApply(id, d) {
        js.reset("modalForm");
        $("#ipmId").val(id);
        $("#ipmBeforeItyId").val(d.ipmBeforeItyId);
        $("#ityMatDescModal").val(d.ipmMatDesc);
        $("#ipmInProjectCodeModal").val(d.ipmInProjectCode);
        $("#ipmInProjectNameModal").val(d.ipmInProjectName);
        $("#ipmNumModal").val(d.ipmNum);
        $("#ipmWeightModal").val(d.ipmWeight);
        $("#ipmRemarkModal").val(d.ipmRemark);
        $("#ityAvaNumModal").val(d.ipmNum+d.ityAvaNum);
        $("#ityAvaWeightModal").val(d.ipmWeight+d.ityAvaWeight);
        js.modal.open("modal-update");
    }
    /**
     *@FunctionName: checkValue
     *@Description: 修改标记数量  同时改变标记重量
     *@Author: TH
     */
    function checkValue(obj) {
        var weight = $("#modalForm [name='ityAvaWeight']").val();
        var avaNum = $("#modalForm [name='ityAvaNum']").val();
        var num = $("#modalForm [name='ipmNum']").val();
        if(weight != null){
            var ipmWeight = weight/avaNum*num;
            ipmWeight = Math.round(ipmWeight*1000)/1000;
            $("#modalForm [name='ipmWeight']").val(ipmWeight);
        }
    }
    /**
     *@FunctionName: findProCodeListData
     *@Description: 根据项目号模糊查询获取项目号列表
     *@Author: 徐一贺
     *@CreateDate: 2020/4/18 12:59
     *@Phone: 18241927380
     *@Version: 1.0.0
     */
    function findProCodeListData(obj) {
        $.post(ctx + 'purchase/invPro/findProCodeList', {
            code: $(obj).val()
        }, function (result) {
            if (result.type == 'SUCCESS') {
                $("#ceoNeedProCodeList").empty();
                for (var i = 0; i < result.data.length; i++) {
                    $("#ceoNeedProCodeList").append('<option value="' + result.data[i].code + '" data="' + result.data[i].name + '" data-status="' + result.data[i].status + '"></option>');
                }
            }
        }, 'json');
    }

    function changeIpmInProjectName() {
        var input_select = $("#modalForm [name='ipmInProjectCode']").val();
        var option_length = $("#ceoNeedProCodeList").find("option").length;
        for (var i = 0; i < option_length; i++) {
            if (input_select == $("#ceoNeedProCodeList option").eq(i).attr('value')) {
                $("#modalForm [name='ipmInProjectName']").val($("#ceoNeedProCodeList option").eq(i).attr("data"));
                break;
            }
        }
    }

    $(function () {
        //加载列表数据
        table = js.table.init({
            id: 'bootstrap-table',
            url: ctx + "half/halInvManage/invToProMark/list",
            showColumns: true,
            showExport: false,
            pageSize: 300,
            striped: false,
            uniqueId: "ipmId",
            onLoadSuccess: function () {
                $('#inventoryQueryTable thead th').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
                $('#inventoryQueryTable tbody tr:first td').each(function () {
                    $(this).width(Math.floor($(this).width()));
                });
            },
            columns: [
                {
                    title: '   <input title="全选" id="selectAll" onclick="selectAll(this)" type="checkbox" />',
                    width: '80',
                    field: 'ipmId',
                    formatter: function (value, row, index) {
                        var disabled = 'disabled="disabled"';
                        if (row.ipmAppStatus == 1) {
                            disabled = "";
                        }
                        return '<input  style="width: 30px;height: 30px" ' + disabled + ' id="cb_change' + row.ipmId + '" name="cb_change" data="' + row.ipmId + '"  type="checkbox" />';
                    }
                },
                {
                    title: '序号', field: 'ipmId', width: '40',
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {title: '物料分类', field: 'ityMatType',
                    formatter: function (value, row, index) {
                        if (row.ityMatType == 2) {
                            return "外协件";
                        }else if(row.ityMatType == 3){
                            return "制作件";
                        }else if(row.ityMatType == 4){
                            return "铝料";
                        }else {
                            return "";
                        }
                    }},
                {title: '库存ID', field: 'ipmBeforeItyId', visible: false},
                {title: '物料描述', field: 'ipmMatDesc', width: '150'},
                {title: '规格', field: 'itySpec'},
                {title: '图号', field: 'ityDrawingNumber'},
                {title: '标记数量', field: 'ipmNum'},
                {title: '可用数量', field: 'ityAvaNum', visible: false},
                {title: '单位', field: 'ityNumUnit'},
                {title: '标记重量', field: 'ipmWeight'},
                {title: '可用重量', field: 'ityAvaWeight', visible: false},
                {title: '项目编号', field: 'ipmInProjectCode'},
                {title: '项目名称', field: 'ipmInProjectName', width: '150'},
                {
                    title: '标记人', field: 'ipmProposerName'
                    , formatter: function (value, row, index) {
                        if (value == undefined) {
                            return "";
                        }
                        return value;
                    }
                },
                {
                    title: '标记日期', field: 'ipmDate',width:'90'
                    , formatter: function (value, row, index) {
                        if (value == undefined) {
                            return "";
                        }
                        return value;
                    }
                },
                {
                    title: '划拨说明', field: 'ipmRemark'
                    , formatter: function (value, row, index) {
                        if (value == undefined) {
                            return "";
                        }
                        return value;
                    }
                },
                {
                    title: '划拨状态', field: 'ipmAppStatus'
                    , formatter: function (value, row, index) {
                        if (value == undefined) {
                            return "";
                        }
                        return '<span class="badge ' + colors[value] + '">' + appyStatusText[value] + '</span> ';

                    }
                },
                {
                    title: '操作', field: 'ipmId',
                    formatter: function (value, row, index) {
                        var actions = [];
                        if ((row.ipmAppStatus === 1 || row.ipmAppStatus === 4) && hasP("halinv:halwarpro:edit")) {
                            actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0);" onclick="submitApply(' + row.ipmId + ')" >提交</a>');
                            actions.push("<a class='btn btn-warning btn-xs'  href='javascript:void(0);' onclick='editApply(" + row.ipmId + "," + JSON.stringify(row) + ")'>修改</a>");
                        }if((row.ipmAppStatus === 1 || row.ipmAppStatus === 4) && hasP("halinv:halwarproexport:del")){
                            actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="removeApply(' + row.ipmId + ')"> 删除</a>');
                        }
                        return actions.join('');
                    }
                }
            ]

        });

        //保存修改
        $("#btn-save").on('click', function () {
            var a = parseFloat($("#modalForm [name='ipmNum']").val());
            var b = parseFloat($("#modalForm [name='ityAvaNum']").val());

            if(a <= 0){
                js.modal.warning("标记数量必须大于0！")
                return;
            }
            if(a > b){
                js.modal.warning("标记数量必须小于可用数量！");
                return;
            }
            //验证通过式提交
            js.submit({
                formId: "modalForm",
                url: ctx + "half/halInvManage/invToProMark/update",
                data: new FormData($("#modalForm")[0]),
                success: function (result) {
                    js.modal.hide("modal-update");
                    js.table.refresh(table);
                }
            });
        });
        //重置验证
        js.modal.hideEvent("modal-update",function(){
            js.validate.reset("modalForm");
            js.reset("modalForm")
        });
        // 验证初始化
        js.validate.init("modalForm", {
            fields: {
                ipmInProjectCode: {
                    validators: {
                        notEmpty: {message: '请输入新项目编码'},
                        threshold: 6, //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
                        remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
                            url: ctx + "purchase/invPro/codeExist",//验证地址
                            message: '项目号不存在',//提示消息
                            delay: 100,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
                            type: 'POST'//请求方式
                            /**自定义提交数据，默认值提交当前input value
                             *  data: function(validator) {
                               return {
                                   password: $('[name="passwordNameAttributeInYourForm"]').val(),
                                   whatever: $('[name="whateverNameAttributeInYourForm"]').val()
                               };
                            }
                             */
                        }
                    }
                },
                //ipmRemark: {validators: {notEmpty: {message: '请输入备注'}}},
                /*ipmNum: {
                    validators: {
                        notEmpty: {message: '请输入标记数量'}
                    }
                }*/
            }
        });
        /**
         * 表格搜索
         */
        $("#btn-search").on('click', function () {
            js.table.search(table);
        });
    });
</script>
</body>
</html>
